<template>
  <transition name="el-zoom-in-center">
    <div class="JADP-preview-main">
      <div class="JADP-common-page-header">
        <el-page-header @back="goBack" content="导出模板"> </el-page-header>
      </div>
      <el-row :gutter="20" style="height: 100%">
        <el-col class="JADP-left" :span="3">
          <div class="btn-group">
            <el-button type="primary" @click="exportWord">导出Word</el-button>
          </div>
          <div class="btn-group">
            <el-button v-print="printObj">打印</el-button>
          </div>
          <h4>常 用 模 块</h4>
          <el-checkbox-group v-model="checkList">
            <el-checkbox label="1">试题难度</el-checkbox>
            <el-checkbox label="2">试题分值</el-checkbox>
            <el-checkbox label="3">试题答案</el-checkbox>
            <el-checkbox label="4">试题解析</el-checkbox>
          </el-checkbox-group>
        </el-col>
        <el-col class="JADP-main" :span="21">
          <div id="printMe">
            <div
              class="title"
              style="text-align: center;font-weight: 700;font-size: 20px; margin-bottom:20px"
            >
              {{ testpapername }}
            </div>
            <table
              style="margin:0 auto;border: 2px solid #d6dbe7;border-collapse:collapse;"
            >
              <tr style="display: flex; width: 100%;">
                <td
                  style="flex: 1;border: 2px solid #d6dbe7;width: 100px;font-size: 14px;font-weight: 700; padding: 8px 10px; flex: none"
                >
                  总分:
                </td>
                <td
                  style="flex: 1;border: 2px solid #d6dbe7;width: 100px;font-size: 14px;font-weight: 700; padding: 8px 10px;"
                >
                  {{ totalScore }}
                </td>
                <td
                  style="flex: 1;border: 2px solid #d6dbe7;width: 100px;font-size: 14px;font-weight: 700; padding: 8px 10px; flex: none"
                >
                  学号:
                </td>
                <td
                  style="flex: 1;border: 2px solid #d6dbe7;width: 100px;font-size: 14px;font-weight: 700; padding: 8px 10px;"
                ></td>
                <td
                  style="flex: 1;border: 2px solid #d6dbe7;width: 100px;font-size: 14px;font-weight: 700; padding: 8px 10px; flex: none"
                >
                  学生姓名:
                </td>
                <td
                  style="flex: 1;border: 2px solid #d6dbe7;width: 100px;font-size: 14px;font-weight: 700; padding: 8px 10px;"
                ></td>
                <td
                  style="border: 2px solid #d6dbe7;width: 100px;font-size: 14px;font-weight: 700; padding: 8px 10px; flex: none"
                >
                  学生得分:
                </td>
                <td
                  style="flex: 1;border: 2px solid #d6dbe7;width: 100px;font-size: 14px;font-weight: 700; padding: 8px 10px;"
                ></td>
              </tr>
            </table>

            <!-- <el-row
              class="table_row"
              style="border: 2px solid #d6dbe7;border-right: none;margin: 20px;display: flex;"
            >
              <el-col class="item" style="display: flex;" :span="8">
                <span
                  class="cell item_label"
                  style="border-right: 2px solid #d6dbe7; padding: 8px 10px; flex: none;width: 100px;font-size: 14px;font-weight: 700; word-break: break-all;"
                >
                  总分:
                </span>
                <span
                  class="cell item_content"
                  style="border-right: 2px solid #d6dbe7; padding: 8px 10px;flex: 1; min-width: 0;font-size: 14px;word-break: break-word;overflow: hidden;"
                >
                  {{ totalScore }}
                </span>
              </el-col>
              <el-col class="item" style="display: flex;" :span="8">
                <span
                  class="cell item_label"
                  style="border-right: 2px solid #d6dbe7; padding: 8px 10px; flex: none;width: 100px;font-size: 14px;font-weight: 700; word-break: break-all;"
                >
                  学生姓名:
                </span>
                <span
                  class="cell item_content"
                  style="border-right: 2px solid #d6dbe7; padding: 8px 10px;flex: 1; min-width: 0;font-size: 14px;word-break: break-word;overflow: hidden;"
                >
                </span>
              </el-col>
              <el-col class="item" style="display: flex;" :span="8">
                <span
                  class="cell item_label"
                  style="border-right: 2px solid #d6dbe7; padding: 8px 10px; flex: none;width: 100px;font-size: 14px;font-weight: 700; word-break: break-all;"
                >
                  学生得分:
                </span>
                <span
                  class="cell item_content"
                  style="border-right: 2px solid #d6dbe7; padding: 8px 10px;flex: 1; min-width: 0;font-size: 14px;word-break: break-word;overflow: hidden;"
                >
                </span>
              </el-col>
            </el-row> -->
            <div class="subject" style="margin-top:10px">
              <div
                class="mysubject"
                v-for="(item, index) in subjectEntityList"
                :key="item.id"
                style="margin-bottom: 10px;padding: 10px 0;"
              >
                <div class="subject_title">
                  <span class="font">
                    {{ item.subsort }}、[
                    {{ getDict("topictype", item.topictype) }} ]</span
                  >
                  <span v-if="checkList.indexOf('1') !== -1">
                    [ 难度系数：{{ getDict("difficultion", item.difficultion) }}
                    ]
                  </span>
                  <span v-if="checkList.indexOf('2') !== -1">
                    [ 分数：{{ item.score }}分 ]
                  </span>
                </div>
                <div
                  class="subject_body"
                  style=" margin-top: 10px;margin-left: 25px;line-height: 22px;"
                >
                  <p v-html="comHTML(item.stem, item.topictype)"></p>
                  <!--单选题  -->
                  <div
                    v-if="item.topictype === '7280c24ba6bf410997c739637706e7e6'"
                  >
                    <div style="margin-top: 10px;">
                      <div
                        style="line-height: 30px; list-style: none;"
                        v-for="(val, inx) in item.optionsum"
                        :key="inx"
                      >
                        {{ val.label }}、{{ val.value }}
                      </div>
                    </div>
                    <p
                      style="margin-top:5px"
                      v-if="checkList.indexOf('3') !== -1"
                    >
                      正确答案：{{ item.result }}
                    </p>
                    <div
                      style="margin-top:5px"
                      v-if="checkList.indexOf('4') !== -1"
                    >
                      <el-row>
                        <el-col :span="1">解析:</el-col>
                        <el-col :span="22">
                          <div v-html="item.answeranalysis"></div>
                        </el-col>
                      </el-row>
                    </div>
                  </div>
                  <!--多选题  -->
                  <div
                    v-if="item.topictype === '1d3f7e7e22c94e49ba95f52e3ec9e3af'"
                  >
                    <div style="margin-top: 10px;">
                      <div
                        style="line-height: 30px;list-style: none;"
                        v-for="(val, inx) in item.optionsum"
                        :key="inx"
                      >
                        {{ val.label }}、{{ val.value }}
                      </div>
                    </div>
                    <p
                      style="margin-top:5px"
                      v-if="checkList.indexOf('3') !== -1"
                    >
                      正确答案：{{ item.result }}
                    </p>
                    <div
                      style="margin-top:5px"
                      v-if="checkList.indexOf('4') !== -1"
                    >
                      <el-row>
                        <el-col :span="1">解析:</el-col>
                        <el-col :span="22">
                          <div v-html="item.answeranalysis"></div>
                        </el-col>
                      </el-row>
                    </div>
                  </div>
                  <!--填空题  -->
                  <div
                    v-if="item.topictype === 'f0b4073bc9ad4426b87cbc70d4526cf6'"
                  >
                    <div
                      style="margin-top:5px"
                      v-if="checkList.indexOf('3') !== -1"
                    >
                      正确答案：
                      <span
                        v-for="(val, inx) in item.optionsum"
                        :key="inx"
                        style="margin-right:10px"
                      >
                        {{ val.value }};
                      </span>
                    </div>
                    <div
                      style="margin-top:5px"
                      v-if="checkList.indexOf('4') !== -1"
                    >
                      <el-row>
                        <el-col :span="1">解析:</el-col>
                        <el-col :span="22">
                          <div v-html="item.answeranalysis"></div>
                        </el-col>
                      </el-row>
                    </div>
                  </div>
                  <!--判断题  -->
                  <div
                    v-if="item.topictype === 'ee505074164e4d0bb54e4a5136b123fb'"
                  >
                    <!-- <div style="margin:20px 0">
                    <el-radio-group disabled v-model="item.result">
                      <el-radio label="正确"></el-radio>
                      <el-radio label="错误"></el-radio>
                    </el-radio-group>
                  </div> -->
                    <p
                      style="margin-top:5px"
                      v-if="checkList.indexOf('3') !== -1"
                    >
                      正确答案：{{ item.result }}
                    </p>

                    <div
                      style="margin-top:5px"
                      v-if="checkList.indexOf('4') !== -1"
                    >
                      <el-row>
                        <el-col :span="1">解析:</el-col>
                        <el-col :span="22">
                          <div v-html="item.answeranalysis"></div>
                        </el-col>
                      </el-row>
                    </div>
                  </div>
                  <!-- 简单题 -->
                  <div
                    v-if="item.topictype === '07ba1e3b779b4e1db3c1318d0f80a688'"
                  >
                    <div
                      style="margin-top:5px"
                      v-if="checkList.indexOf('3') !== -1"
                    >
                      正确答案：
                      <p v-html="item.result"></p>
                    </div>

                    <div
                      style="margin-top:5px"
                      v-if="checkList.indexOf('4') !== -1"
                    >
                      <el-row>
                        <el-col :span="1">解析:</el-col>
                        <el-col :span="22">
                          <div v-html="item.answeranalysis"></div>
                        </el-col>
                      </el-row>
                    </div>
                  </div>
                </div>
                <div :id="'maodian' + index"></div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </transition>
</template>
<script>
import { saveAs } from "file-saver";
import htmlDocx from "html-docx-js/dist/html-docx";
export default {
  name: "exportSubject",
  props: {
    subjectEntityList: {
      tyep: Array,
      default: () => []
    },
    totalScore: {
      type: [String, Number]
    },
    testpapername: {
      type: String,
      default: "试卷名称"
    }
  },

  data() {
    return {
      checkList: [],
      printObj: {
        id: "printMe", //要打印的id名 无#号
        popTitle: "&nbsp;", //页眉标题 默认浏览器标题 空字符串时显示undefined 使用html语言
        extraHead: "" //头部文字 默认空
      }
    };
  },
  computed: {
    comHTML() {
      return function(val, id) {
        if (
          id !== "07ba1e3b779b4e1db3c1318d0f80a688" &&
          id !== "f0b4073bc9ad4426b87cbc70d4526cf6"
        ) {
          let text = val.replace(/<\/p>/gi, "（ ） <\/p>");
          return text;
        } else {
          return val;
        }
      };
    }
  },
  methods: {
    goBack() {
      this.$emit("refresh", true);
    },
    // 导出word
    exportWord() {
      // 前端导出，存在样式问题
      let page = `<!DOCTYPE html>
      <html>
        <head>
          <meta charset="UTF-8">
        </head>
        <body>${document.getElementById("printMe").innerHTML}</body>
      </html>`;
      const converted = htmlDocx.asBlob(page);
      // console.log(converted, page);
      // 用 FielSaver.js里的保存方法 进行输出
      saveAs(converted, `${this.testpapername}.docx`);
      // 调用后端的路径;
      // window.location.href =
      //   this.define.comUrl + "/v3/api/PoiTestController/word";
    }
  }
};
</script>
<style scoped lang="scss">
.JADP-preview-main {
  overflow: hidden;
}
li {
  list-style: none;
}
.JADP-left {
  min-height: 100%;
  border-right: 1px solid #ccc;
  .btn-group {
    text-align: center;
    margin-top: 10px;
    .el-button {
      width: 140px;
    }
  }
  h4 {
    padding-left: 36px;
    line-height: 50px;
    font-weight: 700;
    font-size: 20px;
    margin-top: 10px;
    border-top: 1px solid #ccc;
  }
  .el-checkbox-group {
    padding: 0 30px 16px 30px;
    .el-checkbox {
      display: inline-block;
      margin-left: 10px;
      margin-top: 10px;
    }
  }
}
.JADP-main {
  padding: 20px;
  .title {
    text-align: center;
    font-weight: 700;
    font-size: 20px;
  }
  .table_row {
    border: 2px solid #d6dbe7;
    border-right: none;
    margin: 20px;
    .item {
      display: flex;
      .cell {
        border-right: 2px solid #d6dbe7;
        padding: 8px 10px;
      }
      .item_label {
        flex: none;
        width: 100px;
        font-size: 14px;
        font-weight: 700;
        word-break: break-all;
      }
      .item_content {
        flex: 1;
        min-width: 0;
        font-size: 14px;
        word-break: break-word;
        overflow: hidden;
      }
    }
  }
  .subject {
    height: 660px;
    overflow-y: auto;
    .mysubject {
      margin-bottom: 10px;
      padding: 10px 0;

      // border-bottom: 1px solid #ccc;
      .subject_title {
        .checkbox {
          cursor: pointer;
        }
        //   .font {
        //     font-size: 18px;
        //     font-weight: 600;
        //   }
        .title_right {
          float: right;
          margin-right: 30px;
          padding-top: 3px;
          font-weight: 600;
          font-size: 16px;
          .error {
            color: #ff0000;
          }
          .correct {
            color: #67c23a;
          }
        }
      }
      .subject_body {
        margin-top: 10px;
        margin-left: 25px;
        line-height: 22px;
        ul {
          margin-top: 10px;
          li {
            line-height: 30px;
            >>> .el-radio__label {
              font-size: 16px;
            }
          }
        }
        >>> .el-input__inner {
          padding: 0 5px;
        }
      }
    }
  }
}
</style>
